<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/order_manage/refund_list' }"> <i class="el-icon-lx-cascades"></i> 订单管理 </el-breadcrumb-item>
                <el-breadcrumb-item>[{{ this.$route.query.title }}] 订单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 下单流程 -->
            <div v-if="tableData.paid == 1" class="panel panel-warning order_orders">
                <div class="panel-heading">下单流程</div>
                <div class="panel-body">
                    <el-steps :active="tableData.paid== 1 ? 4: 3" align-center>
                        <el-step title="生成订单"></el-step>
                        <el-step title="在线支付"></el-step>
                        <el-step title="未学习"></el-step>
                        <el-step title="退款完成"></el-step>
                    </el-steps>
                </div>
            </div>
            <!-- 订单信息 -->
            <div class="panel panel-info order_orders">
                <div class="panel-heading">订单信息</div>
                <div class="panel-body">
                    <ul>
                        <li><span>系统订单号：</span><span style="margin-left: 18px">{{ tableData.order_no }}</span></li>
                        <li><span>下单时间：</span><span class="ml">{{ tableData.create_time }}</span></li>
                        <li><span>退款时间：</span><span class="ml">{{ tableData.refund_time }}</span></li>
                        <li><span>支付类型：</span><span class="ml">在线支付</span></li>
                        <li><span>支付方式：</span><span class="ml">{{tableData.channel=='weixin'?'微信支付':'支付宝支付'}}</span></li>
                        <li><span>价格：</span><span style="margin-left: 53px">￥ {{ tableData.price }}</span></li>
                        <li><span>实付金额：</span><span class="ml">￥ {{ tableData.paid_fee }}</span></li>
                        <li>
                            <span>支付状态：</span>
                            <span class="ml" v-if="tableData.paid==0" style="color: red">待支付</span>
                            <span class="ml" v-if="tableData.paid==1" style="color: #38b03f">交易完成</span>
                            <span class="ml" v-if="tableData.paid==2" style="color: orange">可以退款(已支付)</span>
                            <span class="ml" v-if="tableData.paid==3" style="color: red">已退款(交易关闭)</span>
                            <span class="ml" v-if="tableData.paid==-1" style="color: red">未付款(交易关闭)</span>
                        </li>
                        <li><span>支付时间：</span><span class="ml">{{ tableData.paid_time }}</span></li>
                    </ul>
                </div>
            </div>
            <!-- 用户信息 -->
            <div class="panel panel-info order_orders">
                <div class="panel-heading">用户信息</div>
                <div class="panel-body">
                    <p>用户：{{ tableData.nickname }}</p>
                    <p>注册时间：{{ tableData.member_creattime }}</p>
                    <p>手机号:{{tableData.phone}}</p>
                </div>
            </div>
            <!-- 商品信息 -->
            <div class="goodInfo">
                <el-table :data="goodInfo" class="table" ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column label="商品信息">
                        <template slot-scope="scope">
                            <div class="course-info-wrapper">
                                <div class="img-wrapper">
                                    <img :src="scope.row.cover" alt="" class="info-image" />
                                </div>
                                <div class="info-detail">
                                    <div class="title">
                                        <span>{{ scope.row.title }}</span>
                                    </div>
                                    <span>{{ scope.row.description }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型">
                        <template slot-scope="scope">
                            <span>{{ scope.row.product_type }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格">
                        <template slot-scope="scope">
                            <span class="red">{{ '¥ ' + scope.row.price }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { refundDetailData} from '../../api/index';
export default {
    // name: 'order_detail',
    data() {
        return {
            query: {
                id: this.$route.query.id,
            },
            form: {
                order_no: this.$route.query.order_no,
                value: '',
                content: '',
                reply: '',   
            },
            tableData: '',
            goodInfo: [],
            replyVisible: false,
            editVisible: false,
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            refundDetailData(this.query).then((res) => {
                console.log(res);
                this.tableData = res.data;
                this.goodInfo.push(res.data.product);
            });
        }
    }
};
</script>

<style scoped>
@import '~@/components/common/css/common.css';

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;

    border-radius: 4px;

    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}
.panel-warning {
    border-color: #ffdcbc;
}
.panel-heading {
    padding: 8px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-warning .panel-heading {
    color: #f1a325;
    background-color: #fff0d5;
    border-color: #ffdcbc;
}
.panel-body {
    padding: 15px;
}
.panel-info {
    border-color: #a2e4de;
}
.panel-info .panel-heading {
    color: #03b8cf;
    background-color: #ddf3f5;
    border-color: #a2e4de;
}
.panel-body li {
    line-height: 36px;
    border-bottom: 1px solid #eee;
}
.panel-body li:last-child {
    border-bottom: 0;
}
.ml {
    margin-left: 30px;
}
.panel-body p {
    margin: 0 0 10px;
}
.goodInfo {
    box-shadow: 0 0 20px rgb(0 0 0 / 8%);
    background-color: #fff;
    border-radius: 5px;
    border: none;
    position: relative;
    margin-bottom: 30px;
}
.course-info-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 64px;
    padding-right: 58px;
    text-align: left;
    cursor: pointer;
}
.course-info-wrapper .img-wrapper {
    position: relative;
}
.course-info-wrapper .info-image {
    height: 64px;
    width: 80px;
    border-radius: 4px;
}

.course-info-wrapper .info-detail {
    line-height: 1.5;
    height: 100%;
    margin-left: 8px;
}
.course-info-wrapper .info-detail .title {
    max-width: 100%;
    height: 44px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.red {
    color: red;
}
.panel-success {
    border-color: #bae8b6;
}
.panel-success .panel-heading {
    color: #38b03f;
    background-color: #ddf4df;
    border-color: #bae8b6;
}
.detail-evaluate-box .detail {
    margin: 10px 0;
}
.detail-evaluate-box .evaluate-reply {
    color: #03b8cf;
}
</style>

<style>
body,
html {
    font-size: 12px;
}
.el-step__title,
.el-step__icon,
.el-table {
    font-size: 12px;
}
.el-step__icon {
    width: 20px;
    height: 20px;
}
</style>


